<template>
  <div class="multiple-units-maintenance-list-wrap">
    <div v-show="!detailView">
      <el-row type="flex" justify="space-between">
        <el-form class="serach-form" ref="searchForm" :model="searchForm" :inline="true" @submit.native.prevent>
          <el-form-item>
            <el-date-picker
                v-model="searchForm.time"
                type="daterange"
                align="right"
                unlink-panels
                range-separator="至"
                start-placeholder="开始日期"
                end-placeholder="结束日期"
                value-format="yyyy-MM-dd"
                :picker-options="utils.intTimePickerOptions()"
                @change="search">
            </el-date-picker>
          </el-form-item>
          <el-form-item>
            <el-select filterable @change="search" v-model="searchForm.orgIds" placeholder="请选择业主单位">
              <el-option label="全部业主单位" value=""></el-option>
              <el-option
                v-for="item in orgList"
                :key="item.organizationId"
                :label="item.shortName"
                :value="item.organizationId">
              </el-option>
            </el-select>
          </el-form-item>
          <el-form-item>
            <el-button class="form-search-btn" type="primary" @click="search">查询</el-button>
          </el-form-item>
        </el-form>
      </el-row>
      <el-row class="overview-wrap" :gutter="40">
        <el-col :span="8">
          <div class="item-wrap">
            <p class="item-value color-4">{{ unitsStatistics.underWayNum }}</p>
            <p class="item-title">运行中计划总数（个）</p>
          </div>
        </el-col>
        <el-col :span="8">
          <div class="item-wrap">
            <p class="item-value color-5">{{ unitsStatistics.orgNum }}</p>
            <p class="item-title">有计划的单位（个）</p>
          </div>
        </el-col>
        <el-col :span="8">
          <div class="item-wrap">
            <p class="item-value color-6">{{ unitsStatistics.avgNum }}</p>
            <p class="item-title">单位运行中计划平均（个）</p>
          </div>
        </el-col>
      </el-row>
      <el-table
        v-loading="loading"
        ref="multioleUnitsTableList"
        :data="tableData"
        style="width: 100%">
        <el-table-column label="序号" type="index" width="50"></el-table-column>
        <el-table-column label="业主单位" prop="orgName" width="450"></el-table-column>
        <el-table-column label="计划总数（个）" prop="totalNum"></el-table-column>
        <el-table-column label="未开始计划总数（个）" prop="noStartedNum"></el-table-column>
        <el-table-column label="运行中计划总数（个）" prop="underWayNum"></el-table-column>
        <el-table-column label="停用计划总数（个）" prop="noUseNum"></el-table-column>
        <el-table-column label="过期计划总数（个）" prop="expireNum"></el-table-column>
        <el-table-column label="操作" width="250">
          <template slot-scope="scope">
            <el-button @click="jumpDetail(scope.row)" type="text" size="small">清单</el-button>
          </template>
        </el-table-column>
      </el-table>
      <el-pagination
        background
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page.sync="currentPage"
        :page-sizes="[10, 50, 100]"
        :page-size="10"
        layout="total, sizes, prev, pager, next, jumper"
        :total="total">
      </el-pagination>
    </div>
    <transition name="el-zoom-in-top">
      <!-- 单单位 -->
      <single-unit-maintenance-total-list v-if="detailView" :organizationId="orgId" :organizationName="orgName" :hasFather="hasFather" :returnFun="returnFather"></single-unit-maintenance-total-list>
    </transition>
  </div>
</template>

<script>
import utils from '@/utils/util'
import { getOrgList } from '@/api/org'
import { getUnitACountForPc, statOrgMaintainPlanDetailList, statOrgMaintainPlanDetail } from '@/api/assets'
import SingleUnitMaintenanceTotalList from './SingleUnitMaintenanceTotalList'
import { debug } from 'util';

export default {
  name:'MultipleUnitsMaintenanceList',
  components: { 
    SingleUnitMaintenanceTotalList
  },
  props: {
    organizationIds: {
      required: true
    }
  },
  data() {
    return {
      utils: utils,
      hasFather: true,
      detailView: false,
      loading: true,
      orgList: [],
      searchForm: {
        time: '',
        orgIds: ''
      },
      tableData: [],
      // 分页
      currentPage: 1,
      pageSize: 10,
      total: 0,
      // 资产统计信息
      unitsStatistics: {
        underWayNum: 0,
        orgNum: 0,
        avgNum: 0
      }, 
      // 对应业主单位id
      orgId: 0,
      orgName: ''
    }
  },
  created() {
    let that = this
    // 获取业主单位信息
    getOrgList({
      queryType: 0
    }).then(res => {
      if(res.status = 200) {
        that.orgList = res.data
      }
    })
    that.getStatistics()
    that.getTableData()
  },
  methods: {
    getStatistics() {
      let that = this
      statOrgMaintainPlanDetail({
        startTime: that.searchForm.time && that.searchForm.time.length > 0 ? that.searchForm.time[0] + ' 00:00:00' : '',
        endTime: that.searchForm.time && that.searchForm.time.length > 0 ? that.searchForm.time[1] + ' 23:59:59' : '',
        orgIds: that.searchForm.orgIds || this.organizationIds
      }).then(res => {
          $.extend(that.unitsStatistics, res.data)
      })
    },
    getTableData(pageIndex, pageSize) {
      let that = this
      that.loading = true
      if (pageIndex) {
        that.currentPage = pageIndex
      }
      if (pageSize) {
        that.pageSize = pageSize
      }
      let parames = {
        startTime: that.searchForm.time && that.searchForm.time.length > 0 ? that.searchForm.time[0] + ' 00:00:00' : '',
        endTime: that.searchForm.time && that.searchForm.time.length > 0 ? that.searchForm.time[1] + ' 23:59:59' : '',
        orgIds: that.searchForm.orgIds || this.organizationIds,
        queryType: 1,
        pageSize: that.pageSize,
        pageIndex: that.currentPage - 1
      }
      statOrgMaintainPlanDetailList(parames).then(res => {
        that.tableData = res.data
        that.total = res.total
        that.loading = false
      })
    },
    search() {
      this.getStatistics()
      this.getTableData(1)
    },
    handleSizeChange(pageSize) {
      this.getTableData(1, pageSize)
    },
    handleCurrentChange(currentPage) {
      this.getTableData(currentPage)
    },
    // 跳转详情
    jumpDetail(row) {
      if(row) {
        this.orgId = Number(row.orgId)
        this.orgName = row.orgName
        this.detailView = true
      }
    },
    returnFather() {
      this.detailView = false
      this.getStatistics()
      this.getTableData(1)
    }
  }
}
</script>

